<template>
    <div>
        <div class="msg-row">
            <div class="avatar-box">
                <img v-if="!sending" src="../assets/1.jpg" alt="">
            </div>
            <div :class="[sending?'right':'left','msg-box']">
                <div class="send">
                    <div :class="[sending?'right-arrow':'left-arrow','arrow']"></div>
                    <div class="msg-content">
                        <slot name="msgContent"></slot>
                    </div>
                </div>
            </div>
            <div class="avatar-box">
                <img v-if="sending" src="../assets/2.jpg" alt="">
            </div>
        </div>
        
    </div>
</template>

<script>
    export default {
        name: 'sentMsg',
        data () {
            return {
                visible: true
            }
        },
        props:{
            sending: Boolean
        },
        methods:{
            
        },
        mounted(){
            
        }
    }
</script>
<style lang="stylus" scoped>
    .msg-row{
        margin: 5px 0;
        padding: 7px 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .left{
            flex-direction: row;
        }
        .right{
            flex-direction: row-reverse;
        }
        .avatar-box{
            height: 50px;
            width: 14%;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 40px;
                height: 40px;
            }
        }
        .msg-box{
            display: flex;
            position: relative;
            width: 72%;
            padding: 0 14px;
            .send {
                position: relative;
                max-width: calc(100% - 30px);
                box-sizing: border-box;
                width: fit-content;
                width: -webkit-fit-content;
                width: -moz-fit-content;
                word-wrap: break-word;
                line-height: 36px;
                background:yellowgreen;
                border-radius:5px;
                .arrow{
                    position:absolute;
                    top:5px;
                    width:0;
                    height:0;
                    font-size:0;
                    border:solid 7px;
                    border-color:transparent;
                }
                .right-arrow {
                    right:-13px;
                    border-left-color: yellowgreen;
                }
                .left-arrow {
                    left:-13px;
                    border-right-color: yellowgreen;
                }
                .msg-content{
                    height: 100%;
                    width: 100%;
                    padding: 5px;
                }
            }
        }
    }
    
</style>